<template>
  <div class="fixed-amount border-bottom">
    <div 
      class="item-wrapper"
      :key="item.id"
      v-for="(item, index) in fixedAmount" 
      >
      <div 
        class="item button-unselected" 
        :class="activeChoumaIndex == index ? 'active' : ''"
        @click="useFixedAmount(item.amount, index)"
        >
        <span class="icon" v-show="item.icon">
          <i class="iconfont"></i>
        </span>
        <p class="number">
          {{item.amount}}
        </p>
      </div>
    </div>

    <div 
      class="item-wrapper"
      :key="item.id"
      v-for="(item, index) in layPrice" 
      >
      <div 
        class="item button-unselected" 
        :class="activeChoumaIndex == index ? 'active' : ''"
        @click="useFixedAmount(item.amount, index)"
        >
        <span class="icon" v-show="item.icon">
          <i class="iconfont"></i>
        </span>
        <p class="number">
          {{item.amount}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fixedAmount: {
      type: Array,
      default: function() {
        return [
            {
              id: 1,
              amount: 10,
              icon: ' '
            },
            {
              id: 2,
              amount: 20,
              icon: ' '
            },
            {
              id: 3,
              amount: 50,
              icon: ' '
            },
            {
              id: 4,
              amount: 100,
              icon: ' '
            },
            {
              id: 5,
              amount: 500,
              icon: ' '
            },
     
        ]
      }
    }
  },
  data() {
    return {
      activeChoumaIndex: -1,
      layPrice : ""
    }
  },
  mounted() {
    let tmp = new Array()
    if(localStorage.latelyPrice){
      tmp = JSON.parse(localStorage.latelyPrice)
      this.layPrice = [
        {
          id : 6,
          amount: tmp[0],
          icon: ''
        },
        {
          id : 7,
          amount: tmp[1],
          icon: ''
        },
        {
          id : 8,
          amount: tmp[2],
          icon: ''
        },
        {
          id : 9,
          amount: tmp[3],
          icon: ''
        },
        {
          id : 10,
          amount: tmp[4],
          icon: ''
        }
      ]
      console.log(this.layPrice)
    }
  },
  methods: {
    useFixedAmount(amount, index) {
      this.$emit('click', amount)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .fixed-amount 
    display flex 
    flex-wrap wrap
    justify-content space-around
    box-sizing border-box
    padding 0 20px
    padding-top 10px
    width 100%
    .item-wrapper 
      width 20%
      box-sizing border-box
      .item
        width 55px
        height 40px
        box-sizing border-box 
        text-align center
        margin 0 auto
        margin-bottom 10px
        display flex
        flex-direction column
        justify-content center
        align-items center
        .icon 
          width 27px
          height 20px
          display inline-block
          border 1px solid red
</style>